<template>
  <div style="padding: 10px; background-color: white">
    <Search @submit="handleSearch" @reset="handleReset">
      <AFormItem label="员工账号">
        <AInput allow-clear v-model:value="state.formData.userName"></AInput>
      </AFormItem>
      <AFormItem label="员工昵称">
        <AInput allow-clear v-model:value="state.formData.nickName"></AInput>
      </AFormItem>
      <AFormItem label="门店编码">
        <ASelect allow-clear v-model:value="state.formData.storeCode">
          <ASelectOption v-for="(item, index) in state.stores" :value="item.storeCode" :key="index">{{ item.storeName }}
          </ASelectOption>
        </ASelect>
      </AFormItem>
      <AFormItem label="手机号">
        <AInput allow-clear v-model:value="state.formData.phone"></AInput>
      </AFormItem>
      <AFormItem label="邮箱">
        <AInput allow-clear v-model:value="state.formData.email"></AInput>
      </AFormItem>
      <AFormItem label="状态">
        <ASelect allow-clear v-model:value="state.formData.userStatus">
          <ASelectOption :value="1">在职</ASelectOption>
          <ASelectOption :value="0">离职</ASelectOption>
        </ASelect>
      </AFormItem>
    </Search>
  </div>
  <div style="padding: 10px; margin-top: 10px; background-color: white">
    <div style="margin-bottom: 10px">
      <AButton type="primary" @click="addUser"  v-if=" commonStore.$state.user.roleValue!=='cashier'">新增</AButton>
    </div>
    <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false">
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'actions' && commonStore.$state.user.roleValue!=='cashier'">
          <a-popconfirm title="确认执行此操作?" ok-text="是" cancel-text="否" @confirm="initPassword(record)">
            <a-button type="text">重置密码</a-button>
          </a-popconfirm>
          <a-button type="text" @click="editUser(record)">编辑</a-button>
        </template>
      </template>
    </ATable>
    <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
  </div>
  <UserModal :current-user="state.currentUser" v-if="state.userModalVisibel" @cancel="cancelUserModal" @ok="userModalOk">
  </UserModal>
</template>
<script lang="ts" setup>
import { reactive, h, onMounted } from 'vue';
import Search from '@/components/Search/Search.vue';
import Pagination from '@/components/Pagination/index.vue';
import { UserTypes, CommontTypes, PageResult, ResponseVo, StoreTypes } from '@/type';
import { StoreService, UserService } from '@/service';
import UserModal from './components/UserModal.vue';
import { Button, message } from 'ant-design-vue';
import { CommonStore } from '@/store';


const commonStore = CommonStore()
const columns = [
  { title: '员工编号', dataIndex: 'userId' },
  { title: '员工账号', dataIndex: 'userName' },
  { title: '员工昵称', dataIndex: 'nickName' },
  { title: '手机号', dataIndex: 'phone' },
  { title: '邮箱', dataIndex: 'email' },
  {
    title: '状态',
    dataIndex: 'userStatus',
    customRender: ({ record }: { record: UserTypes.IUserItem }) => {
      return h('div', {}, record.userStatus == 1 ? '在职' : '离职');
    },
  },
  {
    title: '创建人',
    customRender: ({ record }: { record: UserTypes.IUserItem }) => {
      return h('div', {}, record.creator ? `${record.creator}/${record.createTime}` : '-');
    },
  },
  {
    title: '修改人',
    customRender: ({ record }: { record: UserTypes.IUserItem }) => {
      return h('div', {}, record.updator ? `${record.updator}/${record.updateTime}` : '-');
    },
  },
  {
    title: '操作',
    dataIndex: "actions"
  },
];

const state = reactive<{
  formData: UserTypes.PageUserType;
  pagination: CommontTypes.IPagination;
  dataSource: UserTypes.IUserItem[];
  userModalVisibel: boolean;
  currentUser: Partial<UserTypes.IUserItem>;
  stores: any[];
}>({
  formData: {},
  pagination: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
  dataSource: [],
  userModalVisibel: false,
  currentUser: {},
  stores: [],
});

onMounted(() => {
  handleSearch();
  getStores();
});

const handleSearch = async () => {
  const res: ResponseVo<PageResult<UserTypes.IUserItem>> = await UserService.pageUser({ ...state.formData, ...state.pagination });
  if (res.code === 0) {
    state.dataSource = res.data.list;
    state.pagination.total = res.data.total;
  }
};

const getStores = async () => {
  const res: ResponseVo<PageResult<StoreTypes.IStoreItem>> = await StoreService.pageStore({ ...state.formData, ...{ pageNum: 1, pageSize: 999 } });
  if (res.code === 0) {
    state.stores = res.data.list;
  }
};

const pageChange = (page: number, size: number) => {
  state.pagination.pageNum = page;
  state.pagination.pageSize = size;
  handleSearch();
};

const handleReset = () => {
  state.formData = {};
  state.pagination.pageNum = 1;
  state.pagination.total = 0;
  handleSearch();
};

const addUser = () => {
  state.userModalVisibel = true;
  state.currentUser = {};
};

const editUser = async (record: UserTypes.IUserItem) => {
  state.currentUser = {};
  let res: ResponseVo<UserTypes.IUserItem> = await UserService.detailUser(record.userId);
  console.log(res);
  if (res.code === 0) {
    state.currentUser = { ...res.data };
    console.log('state.currentUser--->', state.currentUser);
    state.userModalVisibel = true;
  }
};

const initPassword = async (record: any) => {
  let res: any = await UserService.initPassword({ userId: record.userId })
  if (res.code === 0) {
    message.success("操作成功!")
  }
}

const cancelUserModal = () => {
  state.userModalVisibel = false;
};

const userModalOk = () => {
  state.userModalVisibel = false;
  state.pagination.pageNum = 1;
  handleSearch();
};
</script>
<style lang="ts" setup></style>
